<template>
  <div class="dataVisualize-box">
    <div class="card top-box">
      <div class="top-title">数据概览</div>
      <div class="top-content">
        <el-row :gutter="40">
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
            <div class="item-left sle" @click="linkPage(1)">
              <span class="left-title">商户总数</span>
              <div class="img-box">
                <font-awesome-icon :icon="['fas', 'store']" class="fa-2x" />
              </div>
              <span class="left-number">{{ numInfo.totalShop }}</span>
            </div>
          </el-col>
          <el-col class="mb40" :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
            <div class="item-center">
              <div class="gitee-traffic traffic-box" @click="linkPage(2)" title="点击查看详情">
                <div class="traffic-img">
                  <font-awesome-icon :icon="['fas', 'server']" class="fa-2x" />
                </div>
                <span class="item-value">{{ numInfo.totalDevice }}</span>
                <span class="traffic-name sle">总设备数</span>
              </div>
              <div class="gitHub-traffic traffic-box" @click="linkPage(3)" title="点击查看详情">
                <div class="traffic-img">
                  <font-awesome-icon :icon="['fas', 'database']" class="fa-2x" />
                </div>
                <span class="item-value">{{ numInfo.totalWarning }}</span>
                <span class="traffic-name sle">昨日数据库预警</span>
              </div>
              <div class="yesterday-traffic traffic-box" @click="linkPage(4)" title="点击查看详情">
                <div class="traffic-img">
                  <font-awesome-icon :icon="['fas', 'code']" class="fa-2x" />
                </div>
                <span class="item-value">{{ numInfo.totalApiWarning }}</span>
                <span class="traffic-name sle">昨日API服务预警</span>
              </div>
              <div class="today-traffic traffic-box" @click="linkPage(5)" title="点击查看详情">
                <div class="traffic-img">
                  <font-awesome-icon :icon="['fas', 'shopping-cart']" class="fa-2x" />
                </div>
                <span class="item-value">{{ numInfo.totalOrder }}</span>
                <span class="traffic-name sle">昨日订单数</span>
              </div>
            </div>
          </el-col>
          <!-- <el-col class="mb40" :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
            <div class="item-right">
              <div class="echarts-title">Gitee / GitHub 访问量占比</div>
              <div class="book-echarts">
                <Pie ref="pieRef" />
              </div>
            </div>
          </el-col> -->
        </el-row>
      </div>
    </div>
    <!-- <div class="card bottom-box">
      <div class="bottom-title">数据来源</div>
      <div class="bottom-tabs">
        <el-tabs v-model="tabActive" class="demo-tabs">
          <el-tab-pane v-for="item in tab" :key="item.name" :label="item.label" :name="item.name"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="curve-echarts">
        <Curve ref="curveRef" />
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts" name="dataVisualize">
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faStore, faServer, faDatabase, faCode, faShoppingCart } from "@fortawesome/free-solid-svg-icons";
const router = useRouter();
library.add(faStore, faServer, faDatabase, faCode, faShoppingCart);

dayjs.extend(utc);
dayjs.extend(timezone);
import { getShopListApi, getOrderList, getWarningList, getDeviceListApi } from "@/api/modules/datawarn";
const numInfo = reactive({
  totalShop: 0,
  totalDevice: 0,
  totalWarning: 0,
  totalApiWarning: 0,
  totalOrder: 0
});
const getNumInfo = async () => {
  const date = dayjs().subtract(1, "day").format("YYYY-MM-DD");
  const start_time = dayjs.tz(date + " 00:00:00", "YYYY-MM-DD HH:mm:ss", "America/Santiago").unix();
  const end_time = dayjs.tz(date + " 23:59:59", "YYYY-MM-DD HH:mm:ss", "America/Santiago").unix();
  const { data: shopInfo } = await getShopListApi();
  numInfo.totalShop = shopInfo?.total || 0;
  const { data: orderInfo }: any = await getOrderList({ page: 1, limit: 10, start_time, end_time });
  numInfo.totalOrder = orderInfo?.total || 0;
  const { data: warningInfo }: any = await getWarningList({ page: 1, limit: 10, type: 5, start_time, end_time });
  numInfo.totalWarning = warningInfo?.total || 0;
  const { data: apiWarningInfo }: any = await getWarningList({ page: 1, limit: 10, type: 2, start_time, end_time });
  numInfo.totalApiWarning = apiWarningInfo?.total || 0;
  const { data: deviceInfo }: any = await getDeviceListApi({ page: 1, limit: 10, type: 5 });
  numInfo.totalDevice = deviceInfo?.total || 0;
};
// 1 店铺主页 2:设备页面 3: 预警数据库 4 预警Request失败 5: 订单页面
const linkPage = type => {
  switch (type) {
    case 1:
      router.push("/shopList/index");
      break;
    case 2:
      router.push("/deviceList/index");
      break;
    case 3:
      router.push("/datawaringlist/index?type=5");
      break;
    case 4:
      router.push("/datawaringlist/index?type=2");
      break;
    case 5:
      router.push("/createOrderList/index");
      break;
  }
};
onMounted(() => {
  getNumInfo();
});
</script>

<style scoped lang="scss">
@import "./index";
.traffic-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  svg {
    color: var(--el-color-primary);
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.1);
    }
  }
}
.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  svg {
    color: var(--el-color-primary);
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.1);
    }
  }
}
</style>
